<template>
  <div class="table_contain">
    <el-table :data="questionsData" stripe style="width: 100%" center>
      <el-table-column prop="number" label="试题编号" width="120px" />
      <el-table-column prop="subject" label="学科" width="120px" />
      <el-table-column prop="catalog" label="目录" width="120px" />
      <el-table-column label="题型" width="120px">
        <template v-slot="{ row }">
          {{ questionType(row.questionType) }}
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="280px">
        <template v-slot="{ row }">
          <div v-html="row.question"></div>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="180px" />
      <el-table-column label="难度">
        <template v-slot="{ row }">
          {{ diffType(row.difficulty) }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="80px" />
      <el-table-column prop="chkState" label="审核状态" width="120px">
        <template v-slot="{ row }"> {{ checkState(row.chkState) }} </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="150px" />
      <el-table-column prop="chkUser" label="审核人" width="120px" />
      <el-table-column prop="publishState" label="发布状态" width="150px">
        <template v-slot="{ row }">
          {{ publishType(row.publishState) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px" fixed="right">
        <template v-slot="{ row }">
          <el-button type="text" @click="preShow(row)">预览</el-button>
          <el-button
            type="text"
            :disabled="displayState(row.chkState)"
            @click="choice(row.id)"
            >审核</el-button
          >
          <el-button type="text" @click="toNewQuest(row)">修改</el-button>
          <el-button type="text" @click="choicePublishFn(row)">上架</el-button>
          <el-button type="text" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页尾 -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="questObj.page"
        :page-sizes="[2, 5, 10, 15, 20]"
        :page-size="questObj.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 弹出层 -->
    <QuestionsPre
      ref="dialogRef"
      :showDialog.sync="showDialog"
      :preId="preId"
    />
    <el-dialog
      title="题目审核"
      :visible.sync="choiceDialog"
      @close="btnCancel"
      width="30%"
    >
      <el-form :model="choiceForm" ref="choiceRef">
        <el-form-item>
          <el-radio-group v-model="choiceForm.chkState">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="choiceForm.chkRemarks"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="display: flex; justify-content: end"
      >
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  choice,
  removeRandoms,
  choicePublish,
  choiceCheck
} from '../../api/hmmm/questions'
import {
  questionType,
  difficulty,
  chkType,
  publishType
} from '../../api/hmmm/constants'
import QuestionsPre from '../../module-hmmm/components/questions-preview.vue'
export default {
  props: {
    total: {
      type: [Number, String]
    },
    activeName: {
      type: String
    },
    questionForm: {
      type: Object
    }
  },
  data () {
    return {
      questionsData: [],
      questObj: {
        page: 1,
        pagesize: 5,
        chkState: null
      },
      showDialog: false,
      preId: null,
      choiceDialog: false,
      choiceForm: {
        chkState: '',
        chkRemarks: '',
        id: ''
      }
    }
  },
  components: {
    QuestionsPre
  },
  created () {
    this.getChoice()
  },
  methods: {
    // 修改审核
    async btnOk () {
      try {
        await choiceCheck(this.choiceForm)
        this.$message.success('修改成功')
        this.btnCancel()
        await this.getChoice(this.questObj)
      } catch (e) {
        this.$message.error('修改失败')
      }
    },
    // 打开弹出层
    choice (id) {
      this.choiceDialog = true
      this.choiceForm.id = id
    },
    // 关闭弹出层
    btnCancel () {
      this.choiceDialog = false
      this.$refs.choiceRef.resetFields()
    },
    // 上架
    async choicePublishFn (row) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      try {
        await choicePublish(row)
        this.$message.success('上架成功')
        await this.getChoice(this.questObj)
      } catch (e) {
        this.$message.error('上架失败')
      }
    },
    // 编辑试题
    toNewQuest (row) {
      this.$router.push({ path: '/questions/new', query: { id: row.id } })
    },
    // 获取列表
    async getChoice () {
      try {
        if (this.activeName === 'second') {
          this.questObj.chkState = 0
        } else if (this.activeName === 'third') {
          this.questObj.chkState = 1
        } else if (this.activeName === 'fourth') {
          this.questObj.chkState = 2
        }
        const { data } = await choice({
          ...this.questObj,
          ...this.questionForm
        })
        this.questionsData = data.items
        this.$emit('update:total', data.counts)
        this.$message.success('获取数据成功')
      } catch (e) {
        this.$message.error('获取数据失败')
      }
    },
    // 审核禁用
    displayState (num) {
      return num === 1
    },
    // 弹出层
    preShow (row) {
      this.showDialog = true
      this.preId = row.id
      this.$refs.dialogRef.getDetail(row)
    },
    // 删除
    async del (row) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await removeRandoms(row)
        await this.getQuestions()
        this.$message.success('删除成功')
      } catch (e) {
        this.$message.error('删除失败')
      }
    },
    // 分页
    async handleSizeChange (value) {
      this.questObj.pagesize = value
      this.getChoice(this.questionForm)
    },
    async handleCurrentChange (page) {
      this.questObj.page = page
      this.getChoice(this.questionForm)
    },
    // 题型
    questionType (id) {
      const newArr = questionType.filter((item) => -item.value === -id)
      return newArr[0]?.label
    },
    // 难度
    diffType (id) {
      const newArr = difficulty.filter((item) => -item.value === -id)
      return newArr[0]?.label
    },
    // 审核状态
    checkState (num) {
      const newArr = chkType.filter((item) => item.value === num)
      return newArr[0]?.label
    },
    // 发布状态
    publishType (num) {
      const newArr = publishType.filter((item) => item.value === num)
      return newArr[0]?.label
    }
  }
}
</script>

<style lang="less" scoped>
.table_contain {
  /deep/.el-table__cell {
    text-align: center !important;
  }
  /deep/.el-button--text {
    font-size: 10px !important;
  }
}
</style>
